class GamePlayground {
    constructor(root) {
        this.root = root
        this.$playground = $(`<div class="game-playground"></div>`)
        
        this.hide()
        this.root.$game.append(this.$playground)
        this.start()
    }

    get_random_color() {
        let colors = ["blue", "pink", "grey", "white", "skyblue"]
        return colors[Math.floor(Math.random() * 5)]
    }

    resize() {
        this.width = this.$playground.width()
        this.height = this.$playground.height()
        let unit = Math.min(this.width / 16, this.height / 9)
        this.width = unit * 16
        this.height = unit * 9
        this.scale = this.height

        if(this.game_map) this.game_map.resize()
    }

    start(){
        let out = this
        $(window).resize(function() {
            out.resize()
        })
    }

    show(mode) {  //show playground
        this.$playground.show()
        let out = this
        this.state = 'waiting'  // waiting/fighting/over
        this.width = this.$playground.width()
        this.height = this.$playground.height()
        this.game_map = new GameMap(this)
        this.resize()
        this.players = []
        this.players.push(new Player(this, this.width / 2 / this.scale, this.height / 2 / this.scale, 0.05, "green", 0.15, "me", this.root.settings.username, this.root.settings.photo))
        this.mode = mode
        this.notice_board = new NoticeBoard(this)
        this.player_count = 0
        this.chat_field = new ChatField(this)
        if(mode === "single mode") {
            for(let i = 0; i < 5; i++) {
                this.players.push(new Player(this, this.width / 2 / this.scale, this.height / 2 / this.scale, 0.05, this.get_random_color(), 0.15, "robot"))
            } 
        } else if (mode === "multi mode") {
            this.mps = new MultiPlayerSocket(this)
            this.mps.uuid = this.players[0].uuid

            this.mps.ws.onopen = function() {
                out.mps.send_create_player(out.root.settings.username, out.root.settings.photo)
            }
        }
    }

    hide() {  //hide playground
        this.$playground.hide()
    }
}
